
<!DOCTYPE html>
<html lang="en">
<head>
<title>网上商店后台-商品列表</title>
<meta charset="utf-8">
<!--全局CSS-->
<link rel="stylesheet" type="text/css" href="${basePath}/css/share/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="${basePath}/css/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="${basePath}/css/share/myStyle.css">
<!--私有CSS-->
<link rel="stylesheet" href="${basePath}/plugins/myModal/myModal.css">
</head>
<body>
    <!-- 页面顶部导航条 -->
	<div class="row panel titlePanel">
		<div class="col-md-12">
			<div class="col-md-3">
				<h3>
					<i class="fa fa-dashboard"></i> 商品管理
				</h3>
			</div>
			<div class="col-md-6">
				<div style="text-align: center;"></div>
			</div>
			<div class="col-md-3">
				<ul class="functionTip app-breadcrumb breadcrumb">
					<li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
					<li class="breadcrumb-item"><a href="">商品管理 / 列表</a></li>
				</ul>
			</div>
		</div>
	</div>
    <!-- 页面内容体 -->
    
	<div class="row">
		<div class="col-md-12">
      		<div class="panel panel-default" style="margin-bottom: 0px;">
				<div class="panel-heading">
					<h3 class="panel-title">
						<a data-toggle="collapse" data-parent="#accordion" href="#collapseQuery">
							<i class="fa fa-search" style="color:#b6124a;"></i>查询
						</a>
					</h3>
				</div>
				<div id="collapseQuery" class="panel-collapse collapse">
				   <form>
						<div class="panel-body">
							<div class="col-md-12 row">
								<div class="form-group col-md-6 form-inline">
				                  <label class="control-label">名称</label>
				                  <input class="form-control" type="text" placeholder="请输入商品名称的关键字">
				                </div>
				                <div class="form-group col-md-6 form-inline">
				                   <label class="control-label-norequired">类别</label>
				                   <select class="form-control">
				                            <option>-------请选择------</option>
				                            <option>文学</option>
				                            <option>教材</option>
				                            <option>教学辅导</option>
				                            
				                       </select>			             
				                 </div>
				                
						        <div class="col-md-12 text-center" style="margin-bottom: 0px;">
			              			<button class="btn btn-primary" type="submit"><i class="fa fa-search"></i>查询</button>
			   				    </div>
						  </div>
					  </div>
				  </form>
			  </div>
		  </div>
      	</div>
		
		<div class="col-md-12">
			<div class="panel panel-default">
				<div class="panel-heading">
					<div class="row col-md-12">
				    	 <a href="add.html" ><button class="addBtn" type="button"><i class="fa fa-fw fa-lg fa-plus-circle"></i>添加</button></a>
				   </div>
				</div>
				<div class="panel-body">
	              <table class="table table-hover table-bordered table-striped" id="dataTable">
	                <thead>
	                  <tr>
	                    <th>主图</th>
	                    <th>条码</th>
	                    <th>名称</th>
	                    <th>类别</th>
	                    <th>制造商</th>
						<th>单价</th>
						<th>生产日期</th>
	                   <th>操作</th>
	                  </tr>
	                </thead>
	                <tbody>
	                  <tr>
	                  	<td><a href="#" rel="rs-dialog" data-target="bigPicModal" title="点击看大图"><img src="${basePath}/images/portrait.jpg" class="img-thumbnail" alt="头像" width="50" height="50"></a></td>
	                    <td>1234567890123</td>
	                    <td>Java语言程序设计教程</td>
	                    <td>教材</td>
	                    <td>人民邮电出版社</td>
						<td>&yen;34.5</td>
						 <td>2020-12-01</td>
	                    <td>
	                        <a href="modify.html"><button class="btn btn-warning" type="button">修改</button></a>
	                        <a href="../shares/success.html"><button class="btn btn-danger" type="button">禁用</button></a>
	                    </td>
	                  </tr>
	                 </tbody>
	              </table>
              
			    </div>
			    <div class="panel-footer">
			    	 <div class="row paginationBox">
						<div class="col-md-4">
							<div class="paginationInfo">显示第 1 至 10 项结果，共 57 项</div>
						</div>
						<div class="col-md-4"></div>
						<div class="col-md-4">
							<ul class="pagination">
							    <li><a href="#">&laquo;</a></li>
							    <li class="active"><a href="#">1</a></li>
							    <li><a href="#">2</a></li>
							    <li><a href="#">3</a></li>
							    <li><a href="#">4</a></li>
							    <li><a href="#">5</a></li>
							    <li><a href="#">&raquo;</a></li>
							  </ul>
						</div>
					</div>
			    </div>
			</div>
		</div>
		
		
		
	</div>


	<!-- 大图模态框 -->
	<div class="rs-dialog" id="bigPicModal">
		<form action="">
			<div class="rs-dialog-box">
				<a class="close dismiss" href="#">&times;</a>
				
				<div class="rs-dialog-body">
					<div class="row">
						<div class="col-md-12" style="text-align:center;">
							<img src="${basePath}/images/university.jpg" alt="头像" width="400" height="400">
						</div>
					</div>
				</div>
				
			</div>
		</form>	
	</div>

	<!--全局JS-->
	<script src="${basePath}/js/share/jquery-3.2.1.min.js"></script>
	 <script src="${basePath}/js/share/bootstrap.min.js"></script>
	<script src="${basePath}/js/share/share.js"></script>
	<!--私有JS-->
	<script src="${basePath}/plugins/myModal/myModal.js"></script>

	<script type="text/javascript">
    
        
      
    </script>
</body>